<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问内容</title>
    <script>
        function f1(){
            // 获取标签体内容存在两种方式
            // 方式一:通过innerHTML访问
            // 该方式可以识别标签
            // 在取值时,会将标签体中子标签的标签同时返回
            let d1 = document.getElementById("d1");
            console.log("d1的标签体内容为:"+d1.innerHTML)
            // 在赋值时,可以将值中包含的标签解析出来
            d1.innerHTML = "<h1>这是d1中的一级标题</h1>"
        }
        function f2(){
            // 方式二:通过innerText访问
            // 该方式不识别标签
            // 在取值时只能返回标签体中的文本内容,无法返回标签
            let d2 = document.getElementById("d2");
            console.log("d1的标签体内容为:"+d2.innerText)
            // 在赋值时,无法解析标签,只会将标签名作为普通字符串在页面中展示
            d2.innerText = "<h1>这是d2中的一级标题</h1>"
        }
    </script>
</head>
<body>
<div id="d1" onclick="f1()" style="width: 500px;height: 100px;background: red">
    <h2>这是d1中的标题</h2>
</div>
<hr>
<div id="d2" onclick="f2()" style="width: 500px;height: 100px;background: green">
    <h2>这是d2中的标题</h2>
</div>
</body>
</html>